:root {
    --main-color: #ECF0F3; // 主体颜色
    --shadow-color: #b8b8b8; // box-shadow 暗面的颜色
    --white-shadow-color: #ffffff; // box-shadow 亮面的颜色
    --active-color: #0f0f0f; // 激活颜色（被选中等状态）
    --border-color: #b8b8b8; // 边框颜色
    --container-normal-color: #b8b8b8; // 容器颜色
    --liner-gradient-from: #787878; // 渐变开始值
    --liner-gradient-to: #0f0f0f; // 渐变结束值
    --liner-gradient: linear-gradient(160deg, var(--liner-gradient-from), var(--liner-gradient-to)); // 容器渐变的颜色（e.g. button）
    --text-liner-gradient: linear-gradient(160deg, var(--liner-gradient-from), var(--liner-gradient-to)); // 字体渐变的颜色
    --icon-color: #696868; // 图标的颜色

    --text-color: #696868; // 普通文本的颜色
    --active-text-color: #000000; // 文本激活时（eg. 被选中等）的颜色
    --deep-bg-text-color: #CFCFCF; // 背景颜色为深色时的 文本颜色

    --gap-width: 0.35rem;
    --left-side-width: 11rem;

    --left-side-height: 100vh;
    --left-side-top-height: 5rem;
    --left-side-footer-height: 1rem;
    --logo-height: 3rem;
    --header-height: 4.25rem;
    --footer-height: 3rem;
    --input-height-small: 1rem;
    --input-height-normal: 2rem;
    --input-height-medium: 2.25rem;
    --input-height-large: 2.5rem;
    --button-height-small: 1.5rem;
    --button-height: 2rem;
    --button-height-large: 2.5rem;
    --button-height-xlarge: 3rem;
    --menu-item-height: 3.25rem; // 左侧 menu item 的高度
    --handle-container-height: 3rem; // 管理页头部操作栏的高度

    --bg-color: var(--main-color);
    --header-bg-color: var(--bg-color);
    --left-side-bg-color: var(--bg-color);
    --left-side-menu-bg-color: var(--bg-color);
    --right-side-bg-color: var(--bg-color);
    --footer-bg-color: var(--bg-color);
    --bot-bg-color: var(--container-normal-color);
    --bot-active-bg-color: var(--active-color);

    --box-shadow: 0px 5px 7px var(--shadow-color);
    --left-side-box-shadow: 0px 0px 7px var(--shadow-color);
    --header-box-shadow: 0px 0px 7px var(--shadow-color); 
    --container-box-shadow: 12px 12px 16px var(--shadow-color), 
                           -12px -12px 16px var(--white-shadow-color); // container 组件凸出的阴影值
    --button-box-shadow: 5px 5px 4px var(--shadow-color), 
                         -4px -4px 7px var(--white-shadow-color);  // button 凸出的阴影值
    --button-inset-box-shadow: inset 5px 5px 4px var(--shadow-color), 
                         inset -4px -4px 7px var(--white-shadow-color);  // button 内陷的阴影值

    --padding: var(--gap-width);
    --padding-100: 1rem;
    --padding-125: 1.25rem;
    --padding-150: 1.5rem;
    --padding-175: 1.75rem;
    --padding-200: 2rem;

    --margin: var(--gap-width);
    --margin-050: 0.5rem;
    --margin-075: 0.75rem;
    --margin-100: 1rem;
    --margin-125: 1.25rem;
    --margin-150: 1.5rem;
    --margin-175: 1.75rem;
    --margin-200: 2rem;
    --margin-250: 2.5rem;
    --margin-300: 3rem;
    --container-margin-top: var(--margin-150); // 容器距离顶部的元素的高度
    --icon-text-margin-lr: var(--margin-050); // icon 距离文本的左右边距

    --font-size: 12px; // 一般文本字体大小
    --placeholder-font-size: 14px;  // 默认显示文本字体大小
    --header-font-size: 28px; // 标题字体大小
    --label-font-size: 16px;
    --h1-font-size: 48px;
    --h2-font-size: 40px;
    --h3-font-size: 32px;
    --h4-font-size: 24px;
    --h5-font-size: 16px;

    --border-radius: 1rem;
    --border-radius-large: 1rem;
    --input-border-radius: 0.25rem;
    --input-border-radius-medium: 0.5rem;
    --input-border-radius-large: 0.75rem;
    --button-border-radius: 0.25rem;
}

* {
    padding: 0;
    margin: 0;
    color: var(--text-color);
    list-style-type: none;
    text-align: left;
    border-inline-end: none !important;
    box-sizing: border-box;
    outline: none;
    font-size: var(--font-size);
}

a {
    text-decoration: none;
    color: var(--text-color);
}

// // 媒体查询

// 弹性布局
.flex-row-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.flex-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flex-row-c-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-row-s-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-row-e-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.flex-row-b-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.flex-col-s-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-col-s-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.flex-col-c-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

// 滚动条样式
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: var(--background-color-transparent);
    border-radius: 1rem;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scroller-background-color);
    border-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: var(--scroller-background-color-hover);
}

// 过渡动画
.fade-enter {
    opacity: 0;
    transform: translate(0, 25px);
    z-index: 1;
}
.fade-enter.fade-enter-active {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 250ms ease-out, transform 300ms ease;
}
.fade-exit {
    opacity: 1;
    transform: translate(0, 0);
}
.fade-exit.fade-exit-active {
    opacity: 0;
    transform: translate(0, 30px);
    transition: opacity 250ms ease-out, transform 300ms ease;
}

#app-fullsreen-loading {
    position: relative;
    z-index: 99999;
}

.handle-container {
    @extend .flex-row-b-center;
    width: 100%;
    height: var(--handle-container-height);
}
.detail-contents > * {
    margin-top: var(--container-margin-top);
    width: 100%;
    min-height: 5rem;
    height: max-content;
    box-shadow: 6px 6px 8px var(--shadow-color), 
                -6px -6px 8px var(--white-shadow-color);

    &:first-child {
        margin-top: var(--margin-100);
    }
}